<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GPT眼中的dota2英雄</title>
</head>
<style>
    * {
        box-sizing: border-box;
    }
    a{
        text-decoration:none;
    }
    body {
        font-family: Termina, sans-serif;
        color: #84878A;
        background: #25272A;
        overflow-x: hidden;
    }

    section {
        padding: 2vw;
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    h1 {
        font-weight: 800;
        margin: 2rem auto;
        font-size: clamp(3vw, 2rem, 4rem);
        text-align: center;
        z-index: 999;
        max-width: 700px;
        pointer-events: none;
        display: grid;
        place-items: center;
    }
    img {
        transition: 0.3s ease-out;
        overflow: hidden;
        width: 100%;
    }
    .credit a {
        color: inherit;
    }
    .gallery {
        z-index: 1;
        display: flex;
        flex-wrap: nowrap;
        overflow: visible;
        max-width: auto;
        width: 8000vw;
    }

    .dota2 {
        width: 50vw;
        margin: 1rem;
        padding: 1rem;
        align-items: center;
        display: inline-flex;
    }

    .dota2:nth-child(2n) {
        width: 50vw;
    }

    .dota2:hover {
        z-index: 99999999999 !important;
        filter: saturate(1);
    }


    .dota2-slide{
        width: 320px;
        margin: 0 15px;
        padding:27px 30px;
        align-items: center;
        position: relative;
        background: rgb(53,59,63);
        background: linear-gradient(180deg, rgba(53,59,63,1) 0%, rgba(38,41,46,1) 50%, rgba(24,25,28,1) 100%);
        border-radius: 50px;
        box-sizing: border-box;
        color: #FFF;
        background-clip: padding-box;
        border: solid 2px rgba(181, 181, 181, 0.03);
        z-index: 0;
    }
    .dota2-slide .dota2-header{
        margin-bottom: 10px;
    }
    .dota2-slide .subtitle{
        color:#0b99bc;
        font-size:14px;
        display: inline-block;
        margin-bottom:5px;
        text-transform: uppercase;
        transition: all 0.4s ease 0s;
    }
    .dota2-slide .dota2-title{
        text-align: center;
        margin: 0;
    }
    .dota2-slide .dota2-title a{
        color:#A7A9AA;
        font-size:18px;
        font-weight: bold;
        text-transform:capitalize;
        transition: all 0.4s ease 0s;
    }
    .dota2-slide .dota2-title a:hover{
        color:#0b99bc;
        text-decoration: none;
    }
    .dota2-slide .pic{
        overflow: hidden;
        position: relative;
    }
    .dota2-slide .pic img{
        width: 100%;
        height: auto;
        transform: rotate(0deg) scale(1,1);
        transition: all 0.9s ease 0s;
        border-radius: 100%;
    }
    .dota2-slide:hover img{
        transform: rotate(-2deg) scale(1.1,1.1);
    }
    .dota2-slide .pic:after{
        content: "";
        position: absolute;
        top:0;
        left:0;
        width: 100%;
        height: 100%;
        background: rgba(255,255,255,0);
        transition: all 0.9s ease 0s;
    }

    .dota2-slide .dota2-bar li{
        display: inline-block;
        margin-right:3px;
        color:#aaa;
    }
    .dota2-slide .dota2-bar li:last-child{
        margin-right: 0;
    }
    .dota2-slide .dota2-bar li a{
        color:#aaa;
        transition:0.3s ease;
    }
    .dota2-slide .dota2-bar li a:hover{
        text-decoration: none;
        color:#0b99bc;
    }
    .dota2-slide .dota2-description{
        font-size: 14px;
        line-height: 24px;
        margin-bottom:15px;
        color:#767676;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .dota2-slide .score{
        color: #A7A9AA;
        font-size: 20px;
        font-weight: bold;
    }
    @media only screen and (max-width: 479px) {
        .dota2-slide{
            padding: 15px;
        }
        .dota2-slide .dota2-bar li{
            margin-bottom: 5px;
        }
        .dota2-slide .dota2-bar li:last-child{
            margin-bottom: 0;
        }
    }
</style>
<body>
<section>
    <h1>GPT眼中的dota2英雄形象得分</h1>
</section>
<audio controls autoplay loop id="myMusic" hidden>
    <source src="https://hoppinzq.com/dota2/audio/pa.mp3" type="audio/mpeg">
</audio>
<div id="dota2"></div>

<script src="https://hoppinzq.com/dota2/js/jquery.min.js"></script>
<script src="https://hoppinzq.com/dota2/js/gsap.min.js"></script>
<script>
    $.fn.append2 = function(html, callback) {
        let originalHtmlLength = $("body").html().length;
        this.append(html);
        let nums = 1;
        let timer1 = setInterval(function() {
            nums++;
            let clearIntervalfun = function() {
                clearInterval(timer1)
                callback();
            }
            let flag = originalHtmlLength != $("body").html().length || nums > 1000;
            flag && clearIntervalfun()
        }, 1)
    };
    $(function () {
        $("body").click(function () {
            let audios = document.getElementById('myMusic');
            if (audios.paused) {
                audios.play();
            } else {
                audios.pause();
            }
        })
        $.getJSON("https://hoppinzq.com/dota2/gpt/json/dota2.json",function (data) {
            let $gallery=$(`<div class="gallery"></div>`);
            $gallery.append(`<div class="dota2"></div>
                                    <div class="dota2"></div>
                                    <div class="dota2"></div>
                                    <div class="dota2"></div>`);
            $.each(data,function (index,_dota2) {
                $gallery.append(`<div class="dota2">
                        <div class="dota2-slide">
                            <div class="pic">
                                <img src="${_dota2.dota2.url}" alt="">
                            </div>
                            <div class="dota2-header">
                                <h3 class="dota2-title"><a href="#">${_dota2.name}</a></h3>
                            </div>
                            <p class="dota2-description">
                                ${_dota2.dota2.description5}
                            </p>
                            <div class="dota2-header">
                                <h3 class="dota2-title"><a href="#" class="score">得分：${_dota2.score}</a></h3>
                            </div>
                        </div>
                    </div>`);
            })
            $("#dota2").append2($gallery,function () {
                let originalImages = gsap.utils.toArray(".dota2");
                const container = document.querySelector(".gallery");
                const sliderWidth = container.offsetWidth;
                originalImages.forEach((image) => {
                    let clone = image.cloneNode(true);
                    container.appendChild(clone);
                });
                let images = gsap.utils.toArray(".dota2");
                images.forEach((item) => {
                    gsap.to(item, {
                        x: "-=" + Number(sliderWidth / 2),
                        duration: 300,
                        repeat: -1,
                        ease: "none",
                        modifiers: {
                            x: gsap.utils.unitize((x) => {
                                x = (parseFloat(x)) % -Number(sliderWidth * 0.5);
                                return x;
                            })
                        }
                    });
                });
            })
        })
    })
</script>

</body>
</html>
